<template>
	<view>
		<nav-header title="群排行" :show-right="false">
		</nav-header>

		<view>
			<view class="list-header">
				<view class="list-header-left">
					<text>排名</text>
				</view>
				<view class="list-header-center">
					<text>昵称</text>
				</view>
				<view class="list-header-right">
					<text>总邀请人</text>
				</view>
			</view>
			<view v-for="(item,index) in list" :key="index" class="list" v-if="list.length>0">
				<view class="list-left">
					<text>{{index+1}}</text>
					<img class="cup" v-if="index<=2" src="https://file.dgyxy.com/resource/icon/cup1.svg" alt="" />
					<img class="cup" v-if="index<=9 && index>2" src="https://file.dgyxy.com/resource/icon/cup2.svg"
						alt="" />
					<!-- <img :src="item.shareImg" alt="" /> -->
					<head-image :url="item.shareImg" size="100"></head-image>
				</view>
				<view class="list-right">
					<view>
						<text>{{item.shareNickName}}</text>
					</view>
					<view>
						<text style="font-weight: 999;">{{item.total}}</text>
					</view>
				</view>
			</view>
			<view style="margin-top: 20vh" v-else>
				<up-empty :icon="getResource('/icon/empty-message.svg')" text="暂无数据">
				</up-empty>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupId: null,
				list: []
			}
		},
		methods: {
			getData() {
				this.$http({
					url: "/share/getGroupShareInfo?groupId=" + this.groupId,
					method: "GET"
				}).then(res => {
					console.log(res)
					this.list = res
				})
			}
		},
		onLoad(options) {
			this.groupId = options.id
			this.getData()
		}
	}
</script>

<style lang="scss" scoped>
	.list-header {
		display: flex;
		align-items: center;
		gap: 90rpx;
		padding: 10px;
		background-color: #f8f8f8;
	}

	.list-header-right {
		flex: 1;
		text-align: right;
	}

	.list {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 12rpx 36rpx;
		gap: 24rpx;
		border-bottom: 1rpx solid #efefef;


		.list-left {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 24rpx;

			text {
				background-color: $error-500;
				color: #fff;
				border-radius: 50%;
				min-width: 20rpx;
				min-height: 20rpx;
				font-size: 24rpx;
				text-align: center;
				line-height: 20rpx;
				padding: 10rpx;
			}

			.cup {
				width: 60rpx;
				height: 60rpx;
			}

			img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 12rpx;
			}
		}

		.list-right {
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.list:last-child {
		border: none;
	}
</style>